<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆维修</span>
    <el-button @click="dialogVisible=true" type="primary" style="float:right;margin-top:13px;">录入维修车辆</el-button>
  </div>

  <!-- 新增车辆维修弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" :before-close="handleClose"
             style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名"
                      v-model="saveVehicleRepair.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修车辆">
            <el-select placeholder="请选择" v-model="saveVehicleRepair.vehicleId">
              <el-option v-for="item in VehicleRepairOptions" :label="item.license" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="维修项目">
<!--            <el-input placeholder="请输入邮箱" v-model="saveVehicleRepair.item"></el-input>-->
            <el-select placeholder="请选择维修项目" v-model="saveVehicleRepair.item" >
                <el-option v-for="item in VehicleItemOptions" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修地点">
<!--            <el-input placeholder="请输入年龄" v-model="saveVehicleRepair.addr"></el-input>-->
            <el-select placeholder="请选择维修地点" v-model="saveVehicleRepair.addr" >
              <el-option v-for="item in VehicleAddrOptions" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="维修材料">
<!--            <el-input placeholder="请选择" v-model="saveVehicleRepair.material"></el-input>-->
            <el-select placeholder="请选择维修材料" v-model="saveVehicleRepair.material" >
              <el-option v-for="item in VehicleMaterialOptions" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修费用">
            <el-input placeholder="请输入维修费用" v-model="saveVehicleRepair.fee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="维修时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择维修时间"
                            v-model="saveVehicleRepair.repairTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修状态">
            <el-radio-group v-model="saveVehicleRepair.status">
              <el-radio value="1" label="维修中"></el-radio>
              <el-radio value="0" label="已完成"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-dialog>

  <!-- 车辆维修查询卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="维修车辆">
        <el-input placeholder="请输入车牌号" style="width: 170px;"  v-model="searchVehicleRepair.license" ></el-input>
      </el-form-item>
      <el-form-item label="送修人员">
        <el-input placeholder="请输入送修人姓名" style="width: 170px;" v-model="searchVehicleRepair.username"></el-input>
      </el-form-item>
      <el-form-item label="送修状态">

        <el-select placeholder="请选择维修状态" style="width: 150px;" v-model="searchVehicleRepair.status">
          <el-option v-for="item in VehicleStatusOptions"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadVehicleRepairData" >查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

<!--  汽车维修展示-->
  <el-card style="margin:20px;">
    <el-table :data="vehicleRepairArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="license" label="维修车辆" align="center"></el-table-column>
      <el-table-column prop="username" label="送修人员" align="center"></el-table-column>
      <el-table-column prop="addr" label="维修地点" align="center"
                        :formatter="vehicleAddrFormatter"></el-table-column>
      <el-table-column prop="repairTime" label="维修时间" align="center"></el-table-column>
      <el-table-column prop="fee" label="维修费用" align="center"></el-table-column>
      <el-table-column prop="material" label="维修材料" align="center"
                        :formatter="vehicleMaterialFormatter"></el-table-column>
      <el-table-column prop="status" label="维修状态" align="center"
                        :formatter="vehicleStatusFormatter"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small"
                     :disabled="scope.row.level==40" @click="editVehicle(scope.row.id)" >编辑</el-button>
          <el-button link type="primary" size="small"
                     :disabled="scope.row.level==40" @click="deleteVehicle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import {loadRouteLocation} from "vue-router";

const dialogTitle = ref('录入维修车辆');
const dialogVisible = ref(false);

const saveVehicleRepair = ref({
  username: '',
  vehicleId: '',
  item: '',
  addr: '',
  material: '',
  fee: '',
  repairTime: '',
  status: '',
  userId:''
})

const searchVehicleRepair = ref({
  license:'',
  username:'',
  status:''
})

const handleClose = () => {
  if (confirm("是否要关闭本窗口?")) {
    // 退出窗口并且清空填写的表单数据
    dialogVisible.value = false;
    saveVehicleRepair.value={};
  }
}

// const VehicleRepair = [
//   {label:'空闲',value:"1"},
//   {label:'占用',value:"2"},
//   {label:'维修',value:"3"}
// ]

//表格数据
const vehicleRepairArr = ref([]);
//用户数据,并且把用户数据添加到save表单中
const user = getUser();
saveVehicleRepair.value.username=user.username;
saveVehicleRepair.value.userId=user.id;

const VehicleRepairOptions = ref([]);
const VehicleItemOptions = ref([]);
const VehicleAddrOptions = ref([]);
const VehicleMaterialOptions = ref([]);
const VehicleStatusOptions = ref([]);

const loadSaveDoalogData = ()=>{
  axios.get(BASE_URL+"/v1/vehicle/select?status=1").then((response)=>{
    if (response.data.code===2000){
      VehicleRepairOptions.value= response.data.data;
    }
  });
}


onMounted(()=>{
  loadSaveDoalogData();
  //加载维修项目类型字典
  loadDictOptions(VehicleItemOptions,'repair_item');
  loadDictOptions(VehicleAddrOptions,'repair_addr');
  loadDictOptions(VehicleMaterialOptions,'repair_material');
  loadDictOptions(VehicleStatusOptions,'repair_status')
  loadVehicleRepairData();
})

//充实搜索,刷新界面
const resetSearch=()=>{
  searchVehicleRepair.value={};
  loadVehicleRepairData();
}


const vehicleStatusFormatter=(row,column,cellValue,index)=>{
  if(!VehicleStatusOptions.value){
    return cellValue;
  }
  for(let item of VehicleStatusOptions.value){
    if(item.value==cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

const vehicleMaterialFormatter=(row,column,cellValue,index)=>{
  if(!VehicleMaterialOptions.value){
    return cellValue;
  }
  for(let item of VehicleMaterialOptions.value){
    if(item.value==cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

const  vehicleAddrFormatter =(row,column,cellValue,index)=>{
  if(!VehicleAddrOptions.value){
    return cellValue;
  }
  for(let item of VehicleAddrOptions.value){
    if(item.value==cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

//加载表格的数据
const loadVehicleRepairData = ()=>{
  const data = qs.stringify(searchVehicleRepair.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/repair/select?'+data).then((response)=>{
    if (response.data.code ===2000){
      vehicleRepairArr.value = response.data.data;
      //查询之后清空查询数据
      searchVehicleRepair.value={};
      console.log(response.data.data);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//保存修理数据的表单
const save = ()=>{
  saveVehicleRepair.value.userId=user.id;
  const data = qs.stringify(saveVehicleRepair.value)
  axios.post(BASE_URL+'/v1/repair/save?'+data).then((response)=>{
    if (response.data.code ===2000){
      ElMessage.success('保存成功');
    }
  })

  //关闭弹窗
  dialogVisible.value=false;
  //清空表单数据,并注入用户信息
  saveVehicleRepair.value={};
  saveVehicleRepair.value.username=user.username;
}

//删除一整行的数据
const deleteVehicle =(id)=>{
  if (confirm('确认要删除这行数据吗?')){
    axios.post(BASE_URL+"/v1/repair/delete/"+id).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success("删除成功");
        // 刷新视图层的数据
        loadVehicleRepairData();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//修改编辑数据
const editVehicle = (id)=>{
  //设置弹窗出现,并且修改弹窗标题
  dialogVisible.value=true;
  dialogTitle.value='编辑维修车辆';
  //根据Id获取窗口得到信息
  axios.get(BASE_URL+'/v1/repair/select?id='+id).then((response)=>{
    if (response.data.code ===2000){
      saveVehicleRepair.value=response.data.data[0];
      console.log(response.data.data[0]);
    }else {
      ElMessage.error('车牌号或车辆识别码不润徐重复');
    }
  })
}

</script>

<style scoped>

</style>